<template>
  <div class="app-container">
    <el-form inline>
      <!-- 表单元素 -->
      <el-form-item>
        <el-input v-model="searchContent" clearable placeholder="请输入内容" />
      </el-form-item>
      <!-- 查询与情况的按钮 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getRoomList(1)"
          >查询</el-button
        >
      </el-form-item>
      <!-- <el-form-item>
        <el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        >
        </el-cascader>
      </el-form-item> -->
      <!-- 查询与情况的按钮 -->
      <el-button type="primary" @click="showAddExamInfo">考场添加</el-button>
    </el-form>
    <!-- table表格：展示用户信息的地方 -->
    <el-table border stripe v-loading="listLoading" :data="roomList">
      <el-table-column type="index" label="序号" width="80" align="center" />
      <el-table-column prop="area_code" label="考场地址" width="200">
        <template slot-scope="{ row }">
          <!-- {{ row.area_code.slice(0, -2) }} -->
          {{ getArea(row.area_code) }}
        </template>
      </el-table-column>
      <el-table-column prop="room_name" label="考场名称" width="100" />
      <el-table-column prop="create_time" label="创建时间">
        <template slot-scope="{ row }">
          <div>{{ row.create_time?.replace("T", " ") }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template slot-scope="{ row }">
          <HintButton
            type="primary"
            size="mini"
            icon="el-icon-edit"
            title="修改考场信息"
            @click="showAddExamInfo(row)"
          />
          <el-popconfirm
            :title="`确定删除考场 ${row.room_name} 吗?`"
            @confirm="removeExam(row.id)"
          >
            <HintButton
              style="margin-left: 10px"
              slot="reference"
              type="danger"
              size="mini"
              icon="el-icon-delete"
              title="删除考场信息"
            />
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page="current"
      :total="total"
      :page-size="count"
      :page-sizes="[4, 10, 20, 30, 40, 50]"
      style="padding: 20px 0"
      layout="prev, pager, next, jumper, ->, sizes, total"
      @current-change="getRoomList"
      @size-change="handleSizeChange"
    />
    <!-- 对话框的结构 -->
    <el-dialog
      :title="addExamFormTitle"
      :visible.sync="examInfoVisible"
      :before-close="addExamCancel"
    >
      <el-form
        ref="examInfo"
        :model="examInfo"
        :rules="examInfoRules"
        label-width="120px"
      >
        <el-form-item label="考场地址" prop="areaCode">
          <el-cascader
            size="large"
            :options="options"
            v-model="examInfo.areaCode"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="考场名称" prop="roomName">
          <el-input v-model="examInfo.roomName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addExamCancel">取 消</el-button>
        <el-button :loading="loading" type="primary" @click="addExam"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
//二选一
// import {
//   provinceAndCityData,
//   regionData,
//   provinceAndCityDataPlus,
//   regionDataPlus,
//   codeToText,
//   TextToCode,
// } from "element-china-area-data";
import {
  regionData,
  provinceAndCityData,
  codeToText,
  TextToCode,
} from "element-china-area-data";

export default {
  name: "roomList",
  data() {
    return {
      listLoading: false, // 是否显示列表加载的提示
      searchContent: "",
      current: 1, // 当前页码
      count: 4, // 每页数量
      total: 0, // 总数量
      examInfoRules: {
        // 用户添加/修改表单的校验规则
        areaCode: [
          { required: true, message: "考场地址不能为空", trigger: "blur" },
        ],
        roomName: [
          { required: true, message: "考场名称不能为空", trigger: "blur" },
        ],
      },
      loading: false, // 是否正在提交请求中
      addExamFormTitle: "",
      options: provinceAndCityData,
      selectedOptions: [],
      examInfoVisible: false,
      roomList: [],
      examInfo: {
        areaCode: "",
        roomName: "",
      }, // 当前要操作的user
    };
  },

  //发请求一般情况下，我们都是在mounted去发，但是也可以在created内部去发
  created() {
    this.getRoomList();
  },

  methods: {
    getArea(areaCode) {
      // console.log("getArea", codeToText[areaCode.slice(0, -2)]);
      return codeToText[areaCode.slice(0, -2)];
    },
    handleChange(value) {
      var loc = "";
      console.log("CodeToText", this.selectedOptions); //打印区域码
      for (let i = 0; i < this.selectedOptions.length; i++) {
        console.log(codeToText[this.selectedOptions[i]]);
        loc += codeToText[this.selectedOptions[i]];
      }
      console.log(loc);
    },
    showAddExamInfo(row) {
      this.examInfoVisible = true;
      console.log("showAddExamInfo", row);
      if (row.id) {
        this.addExamFormTitle = "修改考场信息";
        this.examInfo.areaCode = [
          row.area_code.slice(0, 2),
          row.area_code.slice(0, 4),
        ];
        this.examInfo.roomName = row.room_name;
        this.examInfo.id = row.id;
        console.log(111, this.examInfo);
      } else {
        this.addExamFormTitle = "添加考场信息";
      }
    },
    addExam() {
      this.$refs.examInfo.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          console.log("examInfo", this.examInfo);
          // let num = this.examInfo.areaCode[1].padEnd(6, "0");
          // console.log("examInfo2", num);
          const params = {
            areaCode: this.examInfo.areaCode[1].padEnd(6, "0"),
            id: this.examInfo.id ? this.examInfo.id : "",
            roomName: this.examInfo.roomName,
          };
          const result = await this.$API.exam.reqAddExam(params);
          console.log("result", result);
          if (result.resultCode == 200) {
            this.$message.success("考场添加成功!");
            this.getRoomList(this.current);
            this.examInfo = {};
            this.examInfoVisible = false;
          } else {
            this.$message.error("考场添加失败");
          }
          this.loading = false;
        } else {
          return;
        }
      });
    },
    addExamCancel() {
      this.examInfoVisible = false;
      this.examInfo = {
        areaCode: "",
        roomName: "",
      };
    },
    // 获取分页列表
    async getRoomList(pages = 1) {
      this.current = pages;
      const { current, count } = this;
      this.listLoading = true;
      let params = { current, count, condition: this.searchContent };
      const result = await this.$API.exam.reqGetRoomList(params).catch(() => {
        this.$message.error("获取列表失败");
      });
      console.log("getRoomList", result);
      if (result.resultCode == 200) {
        this.total = result.data.total;
        this.roomList = result.data.records;
      } else {
        this.$message.error(result.msg);
      }
      this.listLoading = false;
    },
    // 处理pageSize发生改变的监听回调
    handleSizeChange(pageSize) {
      this.count = pageSize;
      this.getRoomList();
    },

    // 删除当前用户
    async removeExam(id) {
      const result = await this.$API.exam.reqdeleteExam({ id });
      if (result.resultCode == 200) {
        this.$message.success("删除成功!");
        this.getRoomList(
          this.roomList.length === 1 ? this.current - 1 : this.current
        );
      } else {
        this.$message.error("删除失败");
      }
      console.log("removeCourse", result);
    },
  },
  computed: {
    // userName() {
    //   return this.$store.state.userInfo.userName || getToken("userName");
    // },
  },
};
</script>

<style lang="scss" scoped>
// .el-select {
//     /deep/.el-input {
//         width: 150%;
//     }
// }
/deep/.Import {
  .item {
    margin-bottom: 5px;
    height: 44px;
    display: flex;
    align-items: center;

    .ImportSpan {
      font-size: 16px;
    }

    .uploadBtn {
      display: inline-block;
      width: 88px;
      height: 40px;
    }
  }

  // .download{

  // }
}

/deep/.el-upload-dragger {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 4px;
}
</style>
